import GpContainer from "@/components/GpContainer";
import GpNavbar from "@/components/GpNavbar";
import { GpTouchableView } from "@/components/GpTouchableView";
import { NAVIGATION_BASE_LAYOUT } from "@/hooks/useLayout";
import { Image, Input, Text, View } from "@tarojs/components";
import clsx from "clsx";
import { Fragment, useEffect, useRef, useState } from "react";
import GpRadioGroup from "../components/GpRadioGroup";
import { workModeOptions } from "@/pages/me/enum-options";
import { EnumKnowledgeExtendType, EnumWorkMode } from "@/apis/endpoint/model";
import GpFontIcon from "@/components/GpFontIcon";
import { useStepOne } from "./composables/useStepOne";
import { Slider } from "@taroify/core";
import { useStepTwo } from "./composables/useStepTwo";
import { useStepThree } from "./composables/useStepThree";
import { navigate } from "@/utils/navigation";
import { tabbarPages } from "@/constants/pageMap";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { getMyIntentiondetail } from "@/apis/endpoint/my";



export default function Index() {
  const [opacity] = useNavigationOpacity()
  const [navigationHeight, setNavigationHeight] = useState(NAVIGATION_BASE_LAYOUT.navigationHeight + NAVIGATION_BASE_LAYOUT.statusBarHeight)
  const stepOptions = useRef<IOption<number>[]>([
    { value: 1, label: "求职意向" },
    { value: 2, label: "期望条件" },
    { value: 3, label: "匹配动作" }
  ])
  const [step, setStep] = useState(1)
  const stepMessages = useRef({
    1: "您好！为了让我更好地帮您求职，我们来设置一些偏好。",
    2: "好的，接下来告诉我你想要什么条件的工作吧！",
    3: "最后，请配置匹配模式及对应匹配动作，以便为你挑选符合职位"
  })
  const {
    stepOneState,
    onWorkModeChange,
    handleEditJobType,
    handleEditIndustry,
    handleEditCity,
    saveStepOne,
    receiveStepOne
  } = useStepOne(next)
  const {
    stepTwoState,
    setStepTwoState,
    workTimeOptions,
    overTimeOptions,
    outOptions,
    salaryTypeOptions,
    welfareOptions,
    getStepTwoOptions,
    saveStepTwo,
    receiveStepTwo,
    chooseAddress
  } = useStepTwo(next)
  const {
    saveStepThree,
    setStepThreeState,
    stepThreeState,
    aiFailedOptions,
    fitOptions,
    matchTypeOptions,
    rejectOptions,
    unfitOptions,
    receiveStepThree
  } = useStepThree(next)
  useEffect(() => {
    getMyIntentiondetail().send()
    .then(setting => {
      if (setting) {
        receiveStepOne(setting)
        receiveStepTwo(setting)
        receiveStepThree(setting)
      }
    })
  }, [])
  function next(nextId?: number) {
    if (step !== 3) {
      setStep(step + 1)
      if (nextId && step === 1) getStepTwoOptions(nextId)
    } else {
      navigate(tabbarPages.robot, null, "switchTab")
    }
  }
  function handleClickLeft() {
    if (step === 1) {
      navigate()
    } else {
      setStep(step - 1)
    }
  }
  function handleClickRight() {
    if (step === 3) {
      saveStepThree()
    } else if (step === 2) {
      saveStepTwo()
    } else {
      saveStepOne()
    }
  }
  function renderStepOne() {
    if (step !== 1) return null
    return (
      <View className="px-[32px]">
        <View className="pt-[18px] pb-[24px]">
          <View className="flex flex-row gap-[16px] items-center">
            <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
              01
            </View>
            <Text className="text-primary text-[32px] font-bold">
              您想申请什么类型的职位呢？
            </Text>
          </View>
          <View className="flex flex-row items-center gap-[20px] mt-[24px]">
            <GpTouchableView className="w-[256px] h-[64px] rounded-[16px] flex flex-row justify-center items-center border-2 border-solid border-theme/50 text-theme text-[24px]">
              识别简历意向职位
            </GpTouchableView>
            <Text className="text-third text-[24px]">*识别后自动填充以下信息</Text>
          </View>
        </View>
        <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
          boxShadow: "0 0 32px #2e294d0a"
        }}>
          <View className="box-border">
            <View className="text-primary text-[28px] font-medium">职位类型</View>
            <GpRadioGroup<EnumWorkMode>
              className="mt-[40px]"
              value={stepOneState.workMode}
              options={workModeOptions}
              onChange={onWorkModeChange}
            />
          </View>
          <View className="box-border">
            <View className="text-primary text-[28px] font-medium">期望职位</View>
            <GpTouchableView className="mt-[32px] flex flex-row justify-between gap-[8px] items-center box-border bg-[#F7F8FA] rounded-[16px] px-[28px] h-[80px]" onClick={handleEditJobType}>
              <Text className={clsx("truncate flex-1 w-0 text-[28px]", stepOneState.jobTypeId ? "text-primary" : "text-placeholder")}>
                {stepOneState.jobTypeName || "请选择期望岗位"}
              </Text>
              <GpFontIcon name="icon-a-jiantou_youda" size={40} className="text-placeholder flex-none" />
            </GpTouchableView>
          </View>
          <View className="box-border">
            <View className="text-primary text-[28px] font-medium">期望行业</View>
            <GpTouchableView className="mt-[32px] flex flex-row justify-between gap-[8px] items-center box-border bg-[#F7F8FA] rounded-[16px] px-[28px] h-[80px]" onClick={handleEditIndustry}>
              <Text className={clsx("truncate flex-1 w-0 text-[28px]", stepOneState.industryNames?.length ? "text-primary" : "text-placeholder")}>
                {stepOneState.industryNames?.length ? stepOneState.industryNames.join("、") : "请选择期望行业"}
              </Text>
              <GpFontIcon name="icon-a-jiantou_youda" size={40} className="text-placeholder flex-none" />
            </GpTouchableView>
          </View>
          <View className="box-border">
            <View className="text-primary text-[28px] font-medium">工作城市</View>
            <GpTouchableView className="mt-[32px] flex flex-row justify-between gap-[8px] items-center box-border bg-[#F7F8FA] rounded-[16px] px-[28px] h-[80px]" onClick={handleEditCity}>
              <Text className={clsx("truncate flex-1 w-0 text-[28px]", stepOneState.cityId ? "text-primary" : "text-placeholder")}>
                {stepOneState.cityName || "请选择工作城市"}
              </Text>
              <GpFontIcon name="icon-a-jiantou_youda" size={40} className="text-placeholder flex-none" />
            </GpTouchableView>
          </View>
        </View>
      </View>
    )
  }
  function renderStepTwo() {
    if (step !== 2) return null
    return (
      <Fragment>
        <View className="px-[32px] mb-[64px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                01
              </View>
              <Text className="text-primary text-[32px] font-bold">
                你对工作内容有什么要求?
              </Text>
            </View>
            <View className="mt-[24px]">
              <Text className="text-third text-[24px]">选择您的擅长喜好以及不喜欢的产品/行业</Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            {
              stepTwoState.extendItems!.map(item => {
                if (item.extendType === EnumKnowledgeExtendType.单选) {
                  return (
                    <View className="box-border" key={item.id}>
                      <View className="text-primary text-[28px] font-medium">
                        {item.label}
                      </View>
                      <View className="flex flex-row flex-wrap gap-[18px] mt-[32px]">
                        {
                          item.extendOptions.map(o => (
                            <GpTouchableView key={o} onClick={() => {
                              if (item.values.includes(o)) return
                              setStepTwoState(draft => {
                                const current = draft.extendItems!.find(l => l.id === item.id)
                                current!.values.length = 0
                                current!.values.push(o)
                              })
                            }} className={clsx("flex flex-row justify-center items-center rounded-[16px] h-[80px] px-[44px] box-border text-[28px]", item.values.includes(o) ? "text-theme font-medium bg-theme/8" : "text-third bg-[#F7F8FA]")}>
                              {o}
                            </GpTouchableView>
                          ))
                        }
                      </View>
                    </View>
                  )
                } else if (item.extendType === EnumKnowledgeExtendType.多选) {
                  return (
                    <View className="box-border" key={item.id}>
                      <View className="text-primary text-[28px] font-medium">
                        {item.label}
                        <Text className="pl-[8px] text-third text-[24px] font-normal">*可多选，未选的模式将被过滤</Text>
                      </View>
                      <View className="flex flex-row flex-wrap gap-[18px] mt-[32px]">
                        {
                          item.extendOptions.map(o => (
                            <GpTouchableView key={o} onClick={() => {
                              setStepTwoState(draft => {
                                const current = draft.extendItems!.find(l => l.id === item.id)
                                const index = current?.values.findIndex(id => id === o)!
                                if (index === -1) current?.values.push(o)
                                else current?.values.splice(index, 1)
                              })
                            }} className={clsx("flex flex-row justify-center items-center rounded-[16px] h-[80px] px-[44px] box-border text-[28px]", item.values.includes(o) ? "text-theme font-medium bg-theme/8" : "text-third bg-[#F7F8FA]")}>
                              {o}
                            </GpTouchableView>
                          ))
                        }
                      </View>
                    </View>
                  )
                } else {
                  return null
                }
              })
            }
          </View>
        </View>
        <View className="px-[32px] mb-[64px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                02
              </View>
              <Text className="text-primary text-[32px] font-bold">
                你对上班时间有什么要求？
              </Text>
            </View>
            <View className="mt-[24px]">
              <Text className="text-third text-[24px]">设置你觉得可以接受的工作时间</Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                可以接受的上班时间
              </View>
              <View className="flex flex-row flex-wrap gap-[18px] mt-[32px]">
                {
                  workTimeOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                     setStepTwoState(draft => {
                      const index = draft.workTime?.indexOf(item.value)!
                      if (index === -1) draft.workTime?.push(item.value)
                      else draft.workTime?.splice(index, 1)
                     })
                    }} className={clsx("flex flex-row justify-center items-center rounded-[16px] h-[80px] px-[44px] box-border text-[28px]", stepTwoState.workTime?.includes(item.value) ? "text-theme font-medium bg-theme/8" : "text-third bg-[#F7F8FA]")}>
                      {item.label}
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                可以接受最长试用期
              </View>
              <View className="mt-[32px]">
                <View className="flex flex-row justify-between items-center text-[24px]">
                  <Text className="text-third">试用期</Text>
                  {
                    stepTwoState.periodOfProbation
                    ? (
                      <Text className="text-theme">{stepTwoState.periodOfProbation}个月</Text>
                    ) : null
                  }
                </View>
                <Slider className="mt-[24px]" size={8} max={6} value={stepTwoState.periodOfProbation} onChange={value => setStepTwoState(draft => {draft.periodOfProbation = value})}>
                  <Slider.Thumb>
                    <View className="box-border w-[24px] h-[40px] rounded-[12px] border-[4px] border-solid border-white bg-theme"></View>
                  </Slider.Thumb>
                </Slider>
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                加班接受度
              </View>
              <View className="mt-[32px] grid grid-cols-2 gap-[18px]">
                {
                  overTimeOptions.map(item => (
                    <GpTouchableView key={item.value} className={clsx("relative flex flex-col justify-center items-center gap-[12px] h-[132px] rounded-[16px] bg-[#F7F8FA]", {
                      "border-[2px] border-solid border-theme/50": item.value === stepTwoState.overtimeType
                    })} onClick={() => {
                      if (item.value === stepTwoState.overtimeType) return
                      setStepTwoState(draft => {
                        draft.overtimeType = item.value
                      })
                    }}>
                      <Text className={clsx("text-[28px]", item.value === stepTwoState.overtimeType ? "text-theme" : "text-primary")}>{item.label}</Text>
                      <Text className="text-third text-[24px]">{item.desc}</Text>
                      {
                        item.value === stepTwoState.overtimeType
                        ? (
                        <View className={clsx("absolute left-0 top-0 bg-theme size-[40px] flex justify-center items-center", "rounded-tl-[16px] rounded-br-[16px]")}>
                          <GpFontIcon name="icon-xuanzhong" color="white" size={24}/>
                        </View>
                        ) : null
                      }
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
          </View>
        </View>
        <View className="px-[32px] mb-[64px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                03
              </View>
              <Text className="text-primary text-[32px] font-bold">
                你对工作地点与通勤有什么要求?
              </Text>
            </View>
            <View className="mt-[24px]">
              <Text className="text-third text-[24px]">设置通勤范围与出差要求</Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                你住在哪？
              </View>
              <View onClick={chooseAddress} className="mt-[32px] h-[80px] rounded-[16px] bg-[#F7F8FA] text-primary text-[28px] px-[28px] flex flex-row justify-between items-center">
                <Text className={clsx("text-[28px]", stepTwoState.address ? "text-primary" : "text-placeholder")}>
                  {stepTwoState.address || "请选择地址"}
                </Text>
                <GpFontIcon name="icon-a-jiantou_youda" size={40} className="text-placeholder" />
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                可接受通勤范围
              </View>
              <View className="mt-[32px]">
                <View className="flex flex-row justify-between items-center text-[24px]">
                  <Text className="text-third">距离住址</Text>
                  {
                    stepTwoState.distance
                    ? (
                      <Text className="text-theme">{stepTwoState.distance}公里<Text className="text-third pl-[8px]">开车约30min</Text></Text>
                    ) : null
                  }
                </View>
                <Slider className="mt-[24px]" size={8} value={stepTwoState.distance} onChange={value => {setStepTwoState(draft => {draft.distance = value})}}>
                  <Slider.Thumb>
                    <View className="box-border w-[24px] h-[40px] rounded-[12px] border-[4px] border-solid border-white bg-theme"></View>
                  </Slider.Thumb>
                </Slider>
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                出差接受度
              </View>
              <View className="mt-[32px] grid grid-cols-2 gap-[18px]">
                {
                  outOptions.map(item => (
                  <GpTouchableView key={item.value} className={clsx("relative flex flex-col justify-center items-center gap-[12px] h-[132px] rounded-[16px] bg-[#F7F8FA]", {
                    "border-[2px] border-solid border-theme/50": stepTwoState.businessTripType === item.value
                  })} onClick={() => {
                    if (stepTwoState.businessTripType === item.value) return
                    setStepTwoState(draft => {
                      draft.businessTripType = item.value
                    })
                  }}>
                    <Text className={clsx("text-[28px]", stepTwoState.businessTripType === item.value ? "text-theme" : "text-primary")}>{item.label}</Text>
                    <Text className="text-third text-[24px]">{item.desc}</Text>
                    {
                      stepTwoState.businessTripType === item.value
                      ? (
                      <View className={clsx("absolute left-0 top-0 bg-theme size-[40px] flex justify-center items-center", "rounded-tl-[16px] rounded-br-[16px]")}>
                        <GpFontIcon name="icon-xuanzhong" color="white" size={24}/>
                      </View>
                      ) : null
                    }
                  </GpTouchableView>
                  ))
                }
              </View>
            </View>
          </View>
        </View>
        <View className="px-[32px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                04
              </View>
              <Text className="text-primary text-[32px] font-bold">
                您对薪酬福利有什么要求吗?
              </Text>
            </View>
            <View className="mt-[16px]">
              <Text className="text-third text-[24px]">请设置您的薪资底线与结构偏好</Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                最低可接受底薪
              </View>
              <View className="mt-[32px] h-[80px] rounded-[16px] bg-[#F7F8FA] text-primary text-[28px] px-[28px]">
                <Input placeholder="请输入最低可接受薪资" type="number" placeholderClass="input-placeholder" style={{height: "100%"}} value={stepTwoState.basicSalary} onInput={({detail: {value}}) => setStepTwoState(draft => {draft.basicSalary = Number(value)})} />
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                最低期望总收入
                <Text className="pl-[8px] text-third text-[24px] font-normal">*包含底薪+提成的总收入预期</Text>
              </View>
              <View className="mt-[32px] h-[80px] rounded-[16px] bg-[#F7F8FA] text-primary text-[28px] px-[28px]">
                <Input placeholder="请输入最低期望总收入" type="number" placeholderClass="input-placeholder" style={{height: "100%"}} value={stepTwoState.totalIncome} onInput={({detail: {value}}) => setStepTwoState(draft => {draft.totalIncome = Number(value)})} />
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                薪资结构偏好
              </View>
              <View className="mt-[32px] grid grid-cols-2 gap-[18px]">
                {
                  salaryTypeOptions.map(item => (
                  <GpTouchableView key={item.value} className={clsx("relative flex flex-col justify-center items-center gap-[12px] h-[132px] rounded-[16px] bg-[#F7F8FA]", {
                    "border-[2px] border-solid border-theme/50": item.value === stepTwoState.salaryType
                  })} onClick={() => {
                    if (item.value === stepTwoState.salaryType) return
                    setStepTwoState(draft => {
                      draft.salaryType = item.value
                    })
                  }}>
                    <Text className={clsx("text-[28px]", item.value === stepTwoState.salaryType ? "text-theme" : "text-primary")}>{item.label}</Text>
                    {/* <Text className="text-third text-[24px]">稳定优先</Text> */}
                    {
                      item.value === stepTwoState.salaryType
                      ? (
                      <View className={clsx("absolute left-0 top-0 bg-theme size-[40px] flex justify-center items-center", "rounded-tl-[16px] rounded-br-[16px]")}>
                        <GpFontIcon name="icon-xuanzhong" color="white" size={24}/>
                      </View>
                      ) : null
                    }
                  </GpTouchableView>
                  ))
                }
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                必须具备的福利
              </View>
              <View className="flex flex-row flex-wrap gap-[18px] mt-[32px]">
                {
                  welfareOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                      setStepTwoState(draft => {
                        const index = draft.welfare?.indexOf(item.value)!
                        if (index === -1) draft.welfare?.push(item.value)
                        else  draft.welfare?.splice(index, 1)
                      })
                    }} className={clsx("flex flex-row justify-center items-center rounded-[16px] h-[80px] px-[44px] box-border text-[28px]", stepTwoState.welfare?.includes(item.value) ? "text-theme font-medium bg-theme/8" : "text-third bg-[#F7F8FA]")}>
                      {item.label}
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
          </View>
        </View>
      </Fragment>
    )
  }
  function renderStepThree() {
    if (step !== 3) return null
    return (
      <Fragment>
        <View className="px-[32px] mb-[48px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                01
              </View>
              <Text className="text-primary text-[32px] font-bold">
                请选择你意向的匹配模式?
              </Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                匹配模式
              </View>
              <View className="flex flex-col gap-[18px] mt-[32px]">
                {
                  matchTypeOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                      if (item.value === stepThreeState.matchType) return
                      setStepThreeState(draft => {
                        draft.matchType = item.value
                      })
                    }} className={clsx("rounded-[16px] px-[48px] py-[32px] box-border", stepThreeState.matchType === item.value ? "bg-theme/8" : "bg-[#F7F8FA]")}>
                      <Text className={clsx("block text-[28px] leading-[28px] mb-[12px]", stepThreeState.matchType === item.value ? "text-theme font-medium" : "text-primary")}>{item.label}</Text>
                      <Text className="text-third text-[24px] leading-[32px]">{item.desc}</Text>
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                硬性拒绝条件
                <Text className="text-third text-[24px]">*多选</Text>
              </View>
              <Text className="text-third text-[24px] inline-block mt-[16px]">满足以下任意勾选的硬性拒绝条件，即为不匹配</Text>
              <View className="flex flex-col gap-[18px] mt-[32px]">
                {
                  rejectOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                      setStepThreeState(draft => {
                        const index = draft.rejectConditions?.indexOf(item.value)!
                        if (index === -1) draft.rejectConditions?.push(item.value)
                        else draft.rejectConditions?.splice(index, 1)
                      })
                    }} className={clsx("rounded-[16px] px-[48px] h-[96px] box-border flex flex-row items-center gap-[20px]", stepThreeState.rejectConditions?.includes(item.value) ? "bg-theme/8" : "bg-[#F7F8FA]")}>
                      <View className={clsx("size-[28px] rounded-[4px] flex justify-center items-center border-[2px] border-solid", stepThreeState.rejectConditions?.includes(item.value) ? "border-theme bg-theme" : "border-[#D0D0D0]")}>
                        <GpFontIcon name="icon-xuanzhong" color="white" size={28} />
                      </View>
                      <Text className={clsx("text-[28px]", stepThreeState.rejectConditions?.includes(item.value) ? "text-theme font-medium" : "text-primary")}>{item.label}</Text>
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
          </View>
        </View>
        <View className="px-[32px] mb-[48px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-center">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                02
              </View>
              <Text className="text-primary text-[32px] font-bold">
                针对不同匹配结果，你希望采取哪些动作?
              </Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] pt-[64px] pb-[80px] px-[28px] flex flex-col gap-[64px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                匹配成功职位
                <Text className="text-third text-[24px]">*多选</Text>
              </View>
              <Text className="text-third text-[24px] inline-block mt-[16px]">核心条件基本满足的职位采取什么动作</Text>
              <View className="flex flex-col gap-[18px] mt-[32px]">
                {
                  fitOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                      setStepThreeState(draft => {
                        const index = draft.successfulOperation?.indexOf(item.value)!
                        if (index === -1) draft.successfulOperation?.push(item.value)
                        else draft.successfulOperation?.splice(index, 1)
                      })
                    }} className={clsx("rounded-[16px] px-[48px] h-[96px] box-border flex flex-row items-center gap-[20px]", stepThreeState.successfulOperation?.includes(item.value) ? "bg-theme/8" : "bg-[#F7F8FA]")}>
                      <View className={clsx("size-[28px] rounded-[4px] flex justify-center items-center border-[2px] border-solid", stepThreeState.successfulOperation?.includes(item.value) ? "border-theme bg-theme" : "border-[#D0D0D0]")}>
                        <GpFontIcon name="icon-xuanzhong" color="white" size={28} />
                      </View>
                      <Text className={clsx("text-[28px]", stepThreeState.successfulOperation?.includes(item.value) ? "text-theme font-medium" : "text-primary")}>{item.label}</Text>
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
            <View className="box-border">
              <View className="text-primary text-[28px] font-medium">
                不匹配职位
                <Text className="text-third text-[24px]">*多选</Text>
              </View>
              <Text className="text-third text-[24px] inline-block mt-[16px]">针对不匹配职位采取什么动作</Text>
              <View className="flex flex-col gap-[18px] mt-[32px]">
                {
                  unfitOptions.map(item => (
                    <GpTouchableView key={item.value} onClick={() => {
                      setStepThreeState(draft => {
                        const index = draft.failedOperation?.indexOf(item.value)!
                        if (index === -1) draft.failedOperation?.push(item.value)
                        else draft.failedOperation?.splice(index, 1)
                      })
                    }} className={clsx("rounded-[16px] px-[48px] h-[96px] box-border flex flex-row items-center gap-[20px]", stepThreeState.failedOperation?.includes(item.value) ? "bg-theme/8" : "bg-[#F7F8FA]")}>
                      <View className={clsx("size-[28px] rounded-[4px] flex justify-center items-center border-[2px] border-solid", stepThreeState.failedOperation?.includes(item.value) ? "border-theme bg-theme" : "border-[#D0D0D0]")}>
                        <GpFontIcon name="icon-xuanzhong" color="white" size={28} />
                      </View>
                      <Text className={clsx("text-[28px]", stepThreeState.failedOperation?.includes(item.value) ? "text-theme font-medium" : "text-primary")}>{item.label}</Text>
                    </GpTouchableView>
                  ))
                }
              </View>
            </View>
          </View>
        </View>
        <View className="px-[32px] mb-[48px]">
          <View className="pt-[18px] pb-[32px]">
            <View className="flex flex-row gap-[16px] items-start">
              <View className="flex flex-row justify-center items-center size-[40px] rounded-[12px] bg-theme text-white text-[24px] font-bold">
                03
              </View>
              <Text className="text-primary text-[32px] font-bold">
                针对AI无法回复HR提问的情况，你希望采取哪些动作？
              </Text>
            </View>
          </View>
          <View className="bg-white rounded-[24px] p-[28px] flex flex-col gap-[18px]" style={{
            boxShadow: "0 0 32px #2e294d0a"
          }}>
            {
              aiFailedOptions.map(item => (
                <GpTouchableView key={item.value} onClick={() => {
                  if (item.value === stepThreeState.aiFailedOperation) return
                  setStepThreeState(draft => {
                    draft.aiFailedOperation = item.value
                  })
                }} className={clsx("rounded-[16px] px-[48px] py-[32px] box-border", stepThreeState.aiFailedOperation === item.value ? "bg-theme/8" : "bg-[#F7F8FA]")}>
                  <Text className={clsx("text-[28px] leading-[28px]", stepThreeState.aiFailedOperation === item.value ? "text-theme font-medium" : "text-primary")}>{item.label}</Text>
                </GpTouchableView>
              ))
            }
          </View>
        </View>
      </Fragment>
    )
  }
  return (
    <GpContainer className="bg-[#F4F6FC]">
      <GpNavbar
        navigationBarTitleText="AI求职配置"
        navigationBarTextStyle="white"
        navigationBarBackgroundColor={`rgba(7, 104, 250, ${opacity})`}
        navigationBarPlaceholder={false}
        onLayout={({statusBarHeight, navigationHeight}) => setNavigationHeight(statusBarHeight + navigationHeight)}
      />
      <View className="relative w-full h-[560px] box-border">
        <Image src="/static/images/home/ai-setting-bg.png" className="w-full absolute left-0 top-0 z-0" mode="widthFix" />
        <View className="absolute inset-0" style={{paddingTop: `${navigationHeight}px`}}>
          <View className="flex flex-row justify-center gap-[54px] pt-[16px]">
            {
              stepOptions.current.map((item, index) => (
                <Fragment key={item.value}>
                  <View className="flex flex-col items-center gap-[18px]">
                    <View className={clsx("size-[64px] rounded-[50%] border-[8px] border-solid border-white/20 flex flex-row justify-center items-center text-[24px] font-bold bg-clip-padding",
                      step === item.value ? "text-theme bg-white" : "text-white bg-white/20"
                    )}>
                      {item.value}
                    </View>
                    <View className={clsx("text-white text-[28px]", step === item.value ? "font-bold" : "")}>{item.label}</View>
                  </View>
                  {
                    index !== stepOptions.current.length - 1
                    ? (
                      <Image src="/static/images/home/ai-setting-next.png" className="size-[48px] block object-cover" />
                    ) : null
                  }
                </Fragment>
              ))
            }
          </View>
          <View className="px-[32px] box-border mt-[48px]">
            <View className="relative h-[128px] bg-theme/40 rounded-[24px] border border-solid border-white overflow-hidden">
              <Image src="/static/images/home/female.png" className="absolute left-0 top-0 bottom-0 h-full block z-0" mode="heightFix" />
              <View className="absolute inset-0 flex justify-center items-center pl-[140px] pr-[28px] text-white text-[28px] leading-[40px]">
                {stepMessages.current[step]}
              </View>
              <View className="absolute inset-0 bg-linear-0 from-0% from-white/50 to-100% to-white/10"></View>
            </View>
          </View>
        </View>
      </View>
      {renderStepOne()}
      {renderStepTwo()}
      {renderStepThree()}
      <View className="flex flex-row gap-[20px] justify-center pb-[32px] pt-[80px]">
        <GpTouchableView onClick={handleClickLeft} className="flex flex-row justify-center items-center box-border bg-primary/10 rounded-[40px] w-[266px] h-[80px] text-[28px] text-primary">
          {step === 1 ? '返回' : '上一步'}
        </GpTouchableView>
        <GpTouchableView onClick={handleClickRight} className="flex flex-row justify-center items-center box-border bg-theme rounded-[40px] w-[400px] h-[80px] text-[28px] text-white">
          {step === 3 ? '完成配置' : `确认下一步(${step}/3)`}
        </GpTouchableView>
      </View>
    </GpContainer>
  )
}
